<template>
    <div class="co-cashout-order-page">
        <div class="co-toolbar box-row">
            <el-date-picker 
                v-model="params.range" 
                unlink-panels 
                type="datetimerange" 
                range-separator="至" 
                start-placeholder="开始日期" 
                end-placeholder="结束日期" 
                size="default"
                value-format="X"
                :shortcuts="shortcuts"
            ></el-date-picker>
            <el-select v-model="params.stage" size="default" style="max-width: 7rem;">
                <el-option v-for="item in cos" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="params.src" size="default" style="max-width: 7rem;">
                <el-option :value="-1" label="全部"></el-option>
                <el-option :value="0" label="钱箱提现"></el-option>
                <el-option :value="1" label="线上提现"></el-option>
            </el-select>
            <el-select v-model="params.uid" size="default" style="max-width: 9rem;">
                <el-option :value="-1" label="全部"></el-option>
                <el-option v-for="item in accounts" :key="item.id" :value="item.id" :label="item.realname ?? item.username"></el-option>
            </el-select>
            <div><el-button size="default" type="primary" @click="onSearch">查找</el-button></div>
        </div>
        <div class="ui-data-list-panel">
            <div class="ui-data-grid">
                <el-table :data="data" size="small" :height="sizes?.tbHeight" highlight-current-row>
                    <el-table-column prop="amount" label="提现总金额" width="120" align="right" :formatter="rmbFormatter"></el-table-column>
                    <el-table-column prop="fee_amount" label="提现手续费" width="120" align="right" :formatter="rmbFormatter"></el-table-column>
                    <el-table-column prop="recived_amount" label="实到金额" width="120" align="right" :formatter="rmbFormatter"></el-table-column>
                    <el-table-column prop="src" label="资金类型" width="80" align="center">
                        <template #default="{row}">
                            <template v-if="row.src==0">现金</template>
                            <template v-else-if="row.src==1">线上</template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="rate" label="提现费率" width="80" align="center" :formatter="rateFormatter"></el-table-column>
                    <el-table-column prop="memo" label="银行类型" :formatter="bankTypeFormatter" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="memo" label="提现账号" width="160" align="center" :formatter="bankCardFormatter"></el-table-column>
                    <el-table-column prop="memo" label="持卡人" width="80" align="center" :formatter="owerFormatter"></el-table-column>
                    <el-table-column prop="createtime" label="提现时间" width="140" :formatter="datetimeFormatter"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="140">
                        <template #default="scope">
                            <div v-if="scope.row.stage == 0">
                                    <span style="color:#f56c6c">申请提现</span>
                            </div>
                            <div v-else-if="scope.row.stage == 1">
                                <span style="color:#67c23a">提现成功</span>
                            </div>
                            <div v-else>
                                    <span style="color:#f56c6c">提现失败</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="ui-pagination-ctn box-row">
                <div class="ui-sumboard">总金额: {{sum}}元</div>
                <el-pagination :page-size="params.limit" :current-page="params.page" @current-change="onCurrentPageChanged" layout="total, prev, pager, next" :total="total"></el-pagination>
           </div>
        </div>
    </div>
</template>
<script>
import { reactive, toRefs,computed } from 'vue'
import {dateFormat} from '../../uiframe/utils'
import {  ElMessage } from 'element-plus'
import { timeShortcuts,cos,cosD } from '../../uiframe/utils'
import { UIMode } from '../../uiframe/services/session';
import { useSocket } from '../../uiframe/services/socket';
export default {
   setup(props) {
        let data = reactive({
            data:[],
            total:0,
            accounts:[],
            params:{
                limit:21,
                page:1,
                range:timeShortcuts(['1m'])[0].value.map(v=>Math.floor(v / 1000)),
                stage:-1,
                src:-1,
                uid:-1,
            },
            
            sum:0,
            sizes:computed(()=>{
                let h = UIMode.mh.value,w = UIMode.mw.value;
                return {
                    tbHeight: h - 34 - 48
                }
            }),
            loading:false,
            shortcuts: timeShortcuts(['cd', 'pd', '7d', '15d', 'cw', 'pw', 'cm', 'pm','3m']),
        })

        const onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        onSearch = ()=>{
            console.log('data.loading = ', data.loading);
            if(data.loading)return;
            data.loading = true;
            useSocket().then(socket=>{
                data.params.range = data.params.range.map(v=>v = parseInt(v));
                socket.rpc('cashout.read', data.params).then(({success: s1,data: res})=>{
                    data.loading = false;
                    data.total = res.total;
                    data.data = res.data;
                }).catch(res=>{
                    data.loading = false;
                })
            })
        },
        methods = {
            onCurrentPageChanged:(page)=>{
                data.params.page = page;
                onSearch();
            },
        }
        const formatter = {
            rmbFormatter:(r,c,v) => v.toFixed(2),
            rateFormatter:(r,c,v) =>{if(r.src==1) return Math.floor((v*10000) / 100) + "%"; return '---'},
            datetimeFormatter:(r,c,v) => v == 0 ? '<空>' : dateFormat(v,'Y-M-D h:m:s'),
            bankCardFormatter:(r,c,v) => r.src==1 ? v['bank_card'] : '---',
            owerFormatter:(r,c,v) => r.src==1 ? v['owner_name'] : '---',
            bankTypeFormatter:(r,c,v) => { if(r.src==0)return '---'; return v['bank_type'] + v['owner_bank']; },
        }

       onSearch();
       useSocket().then(socket=>{
            socket.rpc('accounts', {}).then(res=>{
                data.accounts = res.data.data
            }).catch(res=>onmessage(res));
       })

       return {
           ...toRefs(data),
           onSearch,
           ...methods,
           ...formatter,
           cos,cosD
       };
   }
}
</script>
<style lang="scss">
.co-cashout-order-page{
   position: absolute;left:0;right:0;bottom:0;top:0;
   .ui-data-grid{
       div.cell{padding:0 .25rem;}
   }
}
</style>
